<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>个人中心</title>
    <script src="/public/sp/js/mui.min.js"></script>
    <link href="/public/sp/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/public/sp/css/style.css" />
    <link rel="stylesheet" href="/public/sp/css/iconfont.css" />
    <link rel="stylesheet" href="/public/sp/css/shoupiao.css" />
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <h1 class="mui-title">个人中心</h1>
	</header>{include file="bottom" /}
	<div class="mui-content cash_content"  style="padding-top: 50px;">
	    <div class="mem_top">
	    	<div class="mem_img"><img class="layui-upload-img" src="{$user_info['logo']}"></div>
	    	<div class="mem_info">
	    		<p class="mem_nam"><em style="font-size: 18px;">{$user_info.nick_name}</em></p>
	    		<p class="mem_nam">{$user_info.mobile}</p>
	    	</div>
	    </div>
	    <div class="mem_nav1">
	    	<ul class="mui-table-view mui-grid-view mui-grid-9">
		    	<li class="mui-table-view-cell mui-media" style="padding: 6px 0">
		    	    <a href="{:url('my_tickets')}">
		    	        <span class="mui-icon iconfont icon-ticket"></span>
		    	        <div class="mui-media-body">我的购票</div>
		    	    </a>
		    	</li>
		    	<li class="mui-table-view-cell mui-media" style="padding: 6px 0">
		    	   <a href="{:url('index/xf_list')}">
		    	        <span class="mui-icon iconfont icon-xiaofeizhedongcha"></span>
		    	        <div class="mui-media-body">消费记录</div>
		    	    </a>
		    	</li>
		    	<li class="mui-table-view-cell mui-media" style="padding: 6px 0">
		    	    <a href="{:url('index/ks_list')}">
		    	        <span class="mui-icon iconfont icon-zuanshi"></span>
		    	        <div class="mui-media-body">我的矿石</div>
		    	    </a>
		    	</li>
		    	<li class="mui-table-view-cell mui-media" style="padding: 6px 0">
		    	    <a href="{:url('jp_list')}">
		    	        <span class="mui-icon iconfont icon-jiangpin"></span>
		    	        <div class="mui-media-body">奖品中心</div>
		    	    </a>
		    	</li>
		    	<li class="mui-table-view-cell mui-media" style="padding: 6px 0">
		    	    <a href="{:url('index/mjp_list')}">
		    	        <span class="mui-icon iconfont icon-jiangpin"></span>
		    	        <div class="mui-media-body">我的奖品</div>
		    	    </a>
		    	</li>
		    	<li class="mui-table-view-cell mui-media" style="padding: 6px 0">
		    	   <a href="{:url('cash_list')}">
		    	        <span class="mui-icon iconfont icon-decoration_icon"></span>
		    	        <div class="mui-media-body">兑奖记录</div>
		    	    </a>
		    	</li>
		    	<li class="mui-table-view-cell mui-media" style="padding: 8px 0">
		    	    <a href="{:url('xy_list')}">
		    	        <span class="mui-icon iconfont icon-qiandinghezuoxieyi"></span>
		    	        <div class="mui-media-body">兑奖协议</div>
		    	    </a>
		    	</li>
		    	<li class="mui-table-view-cell mui-media" style="padding: 8px 0">
		    	    <a href="{:url('about')}">
		    	        <span class="mui-icon iconfont icon-qiandinghezuoxieyi"></span>
		    	        <div class="mui-media-body">联系我们</div>
		    	    </a>
		    	</li>
    	   </ul>	    	
	   </div>			
	
	  <!--手机号码绑定弹出框-->
	   {if !$user_info.mobile }
		<div class="mask" id="bind_phone" style="display: block;">
			<form id='login-form' class="login_formbox">
			<div class="phone_box">
				<p class="phonetc_bt">友情提醒:</p>
				<p class="wz">您还未绑定手机号，请您在下方输入框中输入您的手机号码完成绑定。</p>
				<p><input type="text" name="mobile" id="mobile" placeholder="请输入您的手机号码"></p>
				<p class="clearfix">
					<input type="text" id="yzm" name="yzm" placeholder="" class="yzm_input" />
					<span class="yzm_btn" id="send_code">获取验证码</span>
				</p>
				<p><button type="button" onclick="bind_phone()" class="phone_btn">确认</button></p>
			</div>
			</form>
		</div>
		{/if}
	</div>
</body>
<script src="/public/static/js/jquery.min.js"></script>
<script src="/public/static/layui/layui.all.js"></script>
<script>
	var onoff = true;
	//获取验证码
	$('#send_code').click(function() {
		//false就不能发送
		if(!onoff) {
			return;
		}
		onoff = false;
		//点击玩按钮干什么?
		//发验证码? 
		// 1-给谁发? 手机号码
		var phone = $("#mobile").val();
		
		if(phone == '') {
			layer.msg('手机号码不能为空');
			onoff = true;
			return;
		}
		var reg = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则
		if(!reg.test(phone)) {
			layer.msg('手机号码格式不正确');
			onoff = true;
			return;
		}
		$.ajax({
			type:"post",
			//请求的url
			//注意，如果我们使用路由器的情况下，我们需要设置一下本地服务器的ip地址
			url: "{:url('index/index/verify_code')}",
			//请求的过程中传递过去的参数 json
			data: {
				mobile: phone,
			},
			//成功了的回调，并且带有返回值
			success: function(data) {
				layer.msg(data.msg);
				var num = 60;
				var timer = setInterval(function() {
					num--;
					if(num == 0) {
						$('#send_code').text('发送验证码');
						//定时器停了
						clearInterval(timer);
						onoff = true;
					} else {
						$('#send_code').text(num + 'S');
					}
				}, 1000); // 1000 毫秒==1秒
			}
		})
	});
	
	//提交请求
	function bind_phone() {
		var phone = $("#mobile").val();
		var input_code = $("#yzm").val();
		
		if(phone == '') {
			layer.msg('手机号码不能为空');
			return;
		}
		var reg = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则
		if(!reg.test(phone)) {
			layer.msg('手机号码格式不正确');
			onoff = true;
			return;
		}
		if(input_code.trim() == '') {
			layer.msg('验证码不能为空');
			return;
		}
		
		$('.phone_btn').disabled = true;
		setTimeout(function() {
			$('.phone_btn').disabled = false;
		}, 1500);
		//写入数据库
		$.ajax({
			type:"post",
			//请求的url
			//注意，如果我们使用路由器的情况下，我们需要设置一下本地服务器的ip地址
			url: "{:url('index/index/bdmobile')}",
			//请求的过程中传递过去的参数 json
			data: $('#login-form').serialize(),//表单数据
			//成功了的回调，并且带有返回值
			success: function(data) {
				layer.msg(data.msg, {
				  icon: 1,
				  time: 1500 //2秒关闭（如果不配置，默认是3秒）
				}, function(){
					  if(data.code == 1) {
							location.href = data.url
					  }
				}); 
			}
		})
	}
</script>
</html>

